<template>
  <div :class="{erro_wrapper:isData || isErro }" v-if="isData || isErro || pullDownMsg ">
      <Animation v-if="isData"></Animation>
      <div class="msg">{{pullDownMsg}}</div>
      <div class="erro_img" v-if="isErro" @click="getData">
        <img src="//p0.meituan.net/movie/8b521599145a30fe521be9f2d60392d845310.png" alt />
        <div class="erro_msg">您的数据请求错误，请稍后再试</div>
      </div>
  </div>
</template>
<script>
export default {
    props:['isData','pullDownMsg', 'isErro'],
    methods:{
      getData() {
        this.$emit( 'get-data' )
      }
    }
};
</script>
<style scoped>
  .erro_wrapper{
    height: 100%;
  }
  .msg{
    width: 100%;
    font-size: 14px;
    line-height: 45px;
    color: #999;
    text-align: center;
  }
  .erro_img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .erro_img img{
    width: 150px;height: 150px; font-size: 0;
  }
  .erro_msg{
    font-size: 14px;
    color: #999;
  }

</style>

